<!DOCTYPE html>
<html>
<head>
  <title>UI Marker Render Test</title>
  <meta charset="UTF-8">
  <style>
    canvas
    {
      background-color: yellow;
    }
  </style>
  <script src="../../_libs/raphael-min.2.0.1.js"></script>
  <script src="../../../src/kekule.js?min=false"></script>
  <script>
    var drawBoxWidth = 500;
    var drawBoxHeight = 500;
    var drawBridge;
    var drawContext;

    var T = Kekule.Render.MetaShapeType;
    var markerInfos = [
      {
        'shapeType': T.POINT,
        'coords': [{'x': 100, 'y': 100}]
      },
      {
        'shapeType': T.CIRCLE,
        'coords': [{'x': 200, 'y': 100}],
        'radius': 30
      },
      {
        'shapeType': T.LINE,
        'coords': [{'x': 300, 'y': 100}, {'x': 400, 'y': 200}],
        'width': 5,
        'drawStyles': {'strokeDash': [10, 2, 5, 2]}
      },
      {
        'shapeType': T.RECT,
        'coords': [{'x': 100, 'y': 200}, {'x': 200, 'y': 300}],
        'drawStyles': {'strokeDash': [10, 2, 5, 2]}
      },
      {
        'shapeType': T.POLYLINE, // T.POLYGON,
        'coords': [{'x': 100, 'y': 350}, {'x': 200, 'y': 400}, {'x': 150, 'y': 450}, {'x': 180, 'y': 320}],
        'drawStyles': {'strokeDash': [10, 2, 5, 2]}
      }
    ];
    var textMarkerInfos = [
      {
        'text': 'marker 1',
        'coord': {x: 100, y: 100},
        'drawStyles': {
          'color': '#cc0000',
          'fontFamily': 'Times New Roman',
          'fontSize': 20
        }
      },
      {
        'text': 'marker 2\nwith line break',
        'coord': {x: 250, y: 200},
        'drawStyles': {'color': '#00cc00'}
      }
    ];
    function createMarkers()
    {
      var result = new Kekule.ChemWidget.UiMarkerCollection();
      for (var i = 0, l = markerInfos.length; i < l; ++i)
      {
        var info = markerInfos[i];
        var marker = new Kekule.ChemWidget.MetaShapeUIMarker(info);
        if (info.drawStyles)
        {
          marker.setDrawStyles(info.drawStyles);
        }
        result.addMarker(marker);
      }
      for (var i = 0, l = textMarkerInfos.length; i < l; ++i)
      {
        var info = textMarkerInfos[i];
        var marker = new Kekule.ChemWidget.TextUiMarker(info.text, info.coord);
        if (info.drawStyles)
        {
          marker.setDrawStyles(info.drawStyles);
        }
        result.addMarker(marker);
      }
      return result;
    }

    function getDrawStage()
    {
      return document.getElementById('drawStage');
    }
    function getDrawBridge()
    {
      if (!drawBridge)
        drawBridge = Kekule.Render.DrawBridge2DMananger.getPreferredBridgeInstance();
      return drawBridge;
    }
    function getContext()
    {
      if (!drawContext)
        drawContext = getDrawBridge().createContext(getDrawStage(), drawBoxWidth, drawBoxHeight);
      return drawContext;
    }
    function drawMarkers()
    {
      var markers = createMarkers();
      //var renderer = new Kekule.ChemWidget.UiMarkersRenderer(markers, getDrawBridge());
      var renderer = new Kekule.ChemWidget.UiMarkerCollection2DRenderer(markers, getDrawBridge());
      renderer.draw(getContext(), null, {'strokeColor': '#000000'});
    }

    function init()
    {
      drawMarkers();
    }
  </script>
</head>
<body onload="init()">
  <div id="drawStage">
  </div>
</body>
</html>